<template>
    <view @click="onClick" :style="{width,height}" style="justify-content: center;">
        <image v-if="cSrc" :style="{width,height}" :src="cSrc" :mode="mode"></image>
    </view>
</template>

<script>
/**
 * cloud-image 
 * @description 兼容普通资源、unicloud图片资源和七牛云图片资源渲染的组件
 * @property {String} mode	图片裁剪、缩放的模式。默认为widthFix，支持所有image组件的mode值
 * @property {String} src	资源完整链接、uniCloud云存储资源的fileid或七牛云资源的id
 * @property {String} width	图片的宽，默认为：100rpx
 * @property {String} height	图片的高，默认为：100rpx
 * @event {Function} click 点击 cloud-image 触发事件
 */
export default {
    name: "cloud-image",
    emits: ['click'],
    props: {
        mode: {
            type: String,
            default () {
                return 'widthFix'
            }
        },
        src: {
            default () {
                return ""
            }
        },
        width: {
            type: String,
            default () {
                return '100rpx'
            }
        },
        height: {
            type: String,
            default () {
                return '100rpx'
            }
        }
    },
    watch: {
        src: {
            handler(src) {
                if (src && src.substring(0, 8) === "cloud://") {
                    uniCloud.getTempFileURL({
                        fileList: [src]
                    }).then(res => {
                        this.cSrc = res.fileList[0].tempFileURL
                    })
                } else if (src && src.substring(0, 8) === "qiniu://") {
                    // 将七牛云的 id 转换为真实的 URL 地址
                    this.cSrc = `https://cdn.isscloud.site/${src.slice(8)}`
                } else {
                    this.cSrc = src
                }
            },
            immediate: true
        }
    },
    methods: {
        onClick() {
            this.$emit('click')
        }
    },
    data() {
        return {
            cSrc: false
        };
    }
}
</script>    